<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         ul { 
            width: 1500px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            margin: 0;
            padding: 0;
           
            
        }

        ul li {
            width: 250px;
            display: flex;
            flex-direction: column;
            list-style: none;
            border: 1px solid #ccc;
            padding: 10px;
            box-shadow: 0px 0px 5px 0px #000;
            
                        
        }

        ul li .j1 {
            text-decoration: line-through;
        }

        ul li .j2 {
            color: red;
        }
    </style>
</head>
<body>
    <h2>根据数据生成一个商品列表</h2>
    <button id="btn1">根据价格排序</button>
    <button id="btn2">根据销量排序</button>
    <button id="btn3">根据评价排序</button>
    <ul id="list">

    </ul>
    <script>
   var data = [{
            id: '001',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5899.00,
            sale: 5888.00,
            color: '土豪金',
            evaluate: 288,
            sales: 1230
        }, {
            id: '002',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3899.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 289,
            sales: 439
        }, {
            id: '003',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1999.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 438,
            sales: 908
        }, {
            id: '004',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5999.00,
            sale: 5808.00,
            color: '土豪金',
            evaluate: 223,
            sales: 986
        }, {
            id: '005',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3892.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 88,
            sales: 8798
        }];
        
        


        data.sort(function (a, b) {
           
            return b.sale -a.sale 
        })

        function fn() {
        for (var i = 0; i<data.length; i++){
            list.innerHTML += '<li>'+
                '<img src="./' + data[i].imgurl + '"alt="">' +
                ' <h1>' + data[i].name + '</h1>' +
                ' <p>颜色：' + data[i].color + '</p>' +
                ' <p class="j1">原价：' + data[i].price + '</p>' +
                ' <p class="j2">现价：' + data[i].sale + '</p>' +
                ' <p>评价：' + data[i].sales + '</p>' +
                ' <p>销量：' + data[i].evaluate + '</p>' +
                '</li>';
        }
       }

       fn()
            btn1.onclick = function () {
                list.innerHTML = ""
                // console.log(13);
                data.sort(function (a, b) {
                    return b.sale - a.sale
                })
                fn()
            }

            btn2.onclick = function () {
                list.innerHTML = ""
                data.sort(function (a, b) {
                    return b.evaluate - a.evaluate
                })
                fn()
            }

            btn3.onclick = function () {
                list.innerHTML = ""
                data.sort(function (a, b) {
                    return  b.sales - a.sales
                })
                fn()
            }


    </script>
</body>
</html>